<template>
  <div class="NewsBlock">
    <div class="top">
      <div class="left">{{ menuName[0]?.menu_name[locale] }}</div>
      <div
        class="see-more"
        @click="
          $router.push({
            path: '/proportal/new',
            query: { from: 'NewsManage' },
          })
        "
      >
        {{ $t("查看全部", "index.viewAll") }}
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <div class="bottom">
      <div class="b-left" v-if="lunbo.length > 0">
        <el-carousel indicator-position="none" height="260px">
          <el-carousel-item v-for="item in lunbo" :key="item.id">
            <img
              :src="`${item.rotation_url}`"
              width="400"
              height="260"
              alt=""
              @click="$emit('jumpDetails', item)"
            />
            <span class="title">{{ item.title }}</span>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="b-right">
        <div
          class="it"
          v-for="(item, index) in news.slice(0, 5)"
          :key="item.id"
          :style="{
            borderBottom:
              index === news.length - 1 ? 0 : '1px solid rgb(232,234,237)',
          }"
          @click="$emit('jumpDetails', item)"
        >
          <div class="base-info">
            <span>{{ item.title }}</span>
            <img
              v-if="item.is_top && locale === 'zh'"
              src="@/assets/images/top_zh.svg"
              alt=""
            />
            <img
              v-if="item.is_top && locale === 'en'"
              src="@/assets/images/top_en.svg"
              alt=""
            />
          </div>
          <div class="time">
            {{ item.create_time_analysis }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getActiveLunBoPic, getActiveNews } from "@/http/api";
import tools from "@/utils/tools";
export default {
  name: "NewsBlock",
  props: ["menuName"],
  emits: ["jumpDetails"],
  data() {
    return {
      lunbo: [],
      news: [],
      locale: "zh",
    };
  },
  async mounted() {
    this.locale = JSON.parse(localStorage.getItem("locale"));
    let res = await getActiveLunBoPic();
    if (res.code === 20041) {
      this.lunbo = res.data;
    }
    res = await getActiveNews();
    if (res.code === 20041) {
      this.news = tools.changeTime(res.data);
    }
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.NewsBlock {
  width: 60vw;
  height: 338px;
  background-color: #fff;
  padding: 24px 20px 0 24px;
  border-radius: 8px;
  .top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .left {
      color: rgb(31, 35, 41);
      font-weight: 500;
      font-size: 18px;
    }
  }
  .bottom {
    padding-top: 10px;
    height: 280px;
    display: flex;
    .b-left {
      width: 400px;
      height: 248px;
      margin-right: 20px;
      .el-carousel {
        border-radius: 8px;
        .el-carousel__item {
          img {
            cursor: pointer;
          }
          span {
            position: absolute;
            font-size: 18px;
            bottom: 16px;
            left: 20px;
            color: #fff;
          }
        }
      }
    }
    .b-right {
      flex: 1;
      .it {
        width: 100%;
        height: 54px;
        line-height: 54px;
        position: relative;
        font-size: 14px;
        color: rgb(31, 35, 41);
        border-bottom: 1px solid rgb(232, 234, 237);
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        img {
          margin-left: 4px;
        }
        .time {
          color: rgb(100, 106, 115);
        }
        &:hover {
          color: #4c78fc;
          .time {
            color: #4c78fc;
          }
        }
      }
    }
  }
}
</style>
